<template>
  <div class="sp-print" id="zyd">
    <div class="sp-print__header">
      <div class="sp-print__header-qrcode">
        <VueBarcode :value="peOrdersMain.orderNo" :width="1" :height="50">
          Show this if the rendering fails.
        </VueBarcode>
      </div>
      <div class="sp-print__header-title">
        <h2>首都医科大学附属</h2>
        <strong>北京世纪坛医院体检中心体检指引单</strong>
      </div>
      <div class="sp-print__header-avatar">
<!--        <img src="" alt="">-->
<!--        <span>No.1248</span>-->
      </div>
    </div>

    <div class="sp-print__person">
      <div class="sp-print__person-list">
        <div class="sp-print__person-item">姓名: <strong>{{ peOrdersMain.customerName }}</strong></div>
        <div class="sp-print__person-item">性别: <strong>{{ peOrdersMain.sex | formatSex}}</strong></div>
        <div class="sp-print__person-item" style="flex: 2;">年龄: <strong>{{ peOrdersMain.age }}</strong></div>
        <div class="sp-print__person-item" style="flex: 3;">
          单位/二级部门: <strong>{{ peOrdersMain.company }}</strong>
        </div>
      </div>
      <div class="sp-print__person-list">
        <div class="sp-print__person-item" style="flex: 2;">
          分组: <strong>{{ peOrdersMain.groupName }}</strong>
        </div>
        <div class="sp-print__person-item" style="flex: 2;">
          电话: <strong>{{ peOrdersMain.telephone }}</strong>
        </div>
        <div class="sp-print__person-item" style="flex: 3;">
          体检日期: <strong>{{ formatDate(peOrdersMain.signDatetime) }}</strong>
        </div>
      </div>
    </div>
    <div class="sp-print__title">体检项目</div>
    <div class="sp-print__project" v-for="(item,index) in printItemlist" :key="index">
      <div class="flex">
        <div class="sp-print__project-name">{{item.itemName}}</div>
        <div class="sp-print__project-list">
          <div class="sp-print__project-content" v-if="item.descr">
            ( ♥ 提示：{{item.descr}} )
          </div>
          <div class="sp-print__project-content">
            <el-checkbox v-for="(ct,ind) in item.examItemContentDetails" :key="ind" :label="ct.contentName"></el-checkbox>
          </div>
        </div>
        <div class="sp-print__project-auth">签字:______________</div>
      </div>
    </div>
    <div class="sp-print__tips">
      <i class="el-icon-info"></i>
      <span>(提示：体检结束后请务必将此体检指引单交至前台)</span>
    </div>
    <div class="sp-print__footer">
      打印时间: {{nowtime}}
    </div>
  </div>
</template>

<script lang="ts">
import VueBarcode from 'vue-barcode';
export default {
  components: {
    VueBarcode,
  },
  data() {
    return {
			nowtime:"",
      // formInline:{},
      dialogFormVisible: true,
      formLabelWidth: '80px',
      rules: {},
      // data: this.order,
			printItemlist:this.order.peOrdersDetailsList,
			peOrdersMain:this.order.peOrdersMain||{},
    }
  },
  props: {
    order: {
      type: Object,
      defalut: {}
    }
  },
  watch: {
    order(newValue, oldValue) {
      this.order = newValue;
      this.printItemlist = this.order.peOrdersDetailsList
      if(this.order.peOrdersMain != undefined){
        this.peOrdersMain = this.order.peOrdersMain
      }

			// console.log("watch",this.order);
    }
  },
	mounted() {
		this.nowtime = this.getCurrentTime();
	},
	methods: {
		getCurrentTime() {
			 //获取当前时间
			let myDate = new Date()
			let wk = myDate.getDay()
			let yy = String(myDate.getFullYear())
			let mm = myDate.getMonth() + 1
			let dd = String(myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate())
			let hou = String(myDate.getHours() < 10 ? '0' + myDate.getHours() : myDate.getHours())
			let min = String(myDate.getMinutes() < 10 ? '0' + myDate.getMinutes() : myDate.getMinutes())
			let sec = String(myDate.getSeconds() < 10 ? '0' + myDate.getSeconds() : myDate.getSeconds())
			let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
			let week = weeks[wk]
			this.nowDate = yy + '年' + mm + '月' + dd +'日'
			this.nowTime = hou + ':' + min + ':' + sec
			this.nowWeek = week
			let nowdata=this.nowDate+this.nowTime
			return nowdata
		},
    print() {
      const pindex = window.localStorage.getItem('zydIndex')
      const pname = window.localStorage.getItem('zydName')
      if (pindex > -1 && pindex !== undefined && pindex !== null) {
        const lodop = window.LODOP
        var strBodyStyle = `
        <style>
          body {
            font-family: '微软雅黑';
            font-size: 14px;
            line-height: 1.4;
          }
          .flex {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
          }
          .sp-print__project-auth {
            white-space: nowrap;
          }
          .sp-print {
            position: relative;
            width: 100%;
            padding: 20px;
            border: 1px solid #ccc;
            margin: 0 auto;
            box-sizing: border-box;
          }
          .sp-print__header {
            display: flex;
          }
          .sp-print__header img {
            display: block;
          }
          .sp-print__header-qrcode {
            width: 150px;
            height: 100px;
          }
          .sp-print__header-qrcode img {
            width: 100%;
            height: 100%;
          }
          .sp-print__header-avatar {
            width: 150px;
            height: 200px;
          }
          .sp-print__header-avatar img {
            width: 100%;
            height: 170px;
          }
          .sp-print__header-avatar span {
            display: block;
            height: 30px;
            line-height: 40px;
            font-size: 16px;
            text-align: center;
            font-weight: bold;
          }
          .sp-print__header-title {
            flex: 1;
            padding: 0 30px;
            line-height: 1;
            font-size: 24px;
            text-align: center;
            font-weight: bold;
            height: 100px;
            overflow: hidden;
          }
          .sp-print__header-title h2 {
            font-size: 24px;
          }
          .sp-print__person {
            position: absolute;
            top: 140px;
            left: 20px;
            right: 180px;
            height: 100px;
            padding-top: 20px;
            padding-bottom: 20px;
            border-top: 1px solid #eee;
            box-sizing: border-box;
          }
          .sp-print__person-list {
            display: flex;
            align-items: center;
          }
          .sp-print__person-item {
            flex: 1;
            height: 30px;
            line-height: 30px;
          }
          .sp-print__title {
            height: 40px;
            line-height: 40px;
            font-size: 18px;
            color: #333;
            text-align: center;
            background: #f7f7f7;
            margin: 10px auto 0;
          }
          .sp-print__project {
            display: flex;
            align-items: center;
            border-bottom: 1px solid #eee;
            padding: 10px 0;
            min-height: 80px;
          }
          .sp-print__project-name, .sp-print__project-auth {
            width: 150px;
          }
          .sp-print__project-list {
            flex: 1;
            padding: 0 20px;
          }
          .sp-print__project-tips {
            padding-bottom: 10px;
          }
          .sp-print__tips {
            display: flex;
            align-items: center;
            padding: 10px 0;
          }
          .sp-print__tips i {
            padding: 0 10px;
          }
          .sp-print__footer {
            padding-top: 10px;
            border-top: 1px solid #eee;
            -moz-text-align-last: right;
                text-align-last: right;
            font-size: 14px;
          }
        </style>
        `
        var strFormHtml = strBodyStyle + '<body>' + document.getElementById('zyd').innerHTML + '</body>'
        console.log('第几台打印机', pindex)
        lodop.SET_PRINTER_INDEX(pname)
        lodop.PRINT_INITA('0mm', '0mm', '210mm', '297mm', '')
        lodop.SET_PRINT_PAGESIZE(0, '0mm', '0mm', '210mm', '297mm', '指引单')
        lodop.ADD_PRINT_HTML('2%', '2%', '96%', '96%', strFormHtml)
        lodop.PREVIEW()
        // lodop.PRINT()
      } else {
        this.$message.error('请先修改打印设置中指引单所使用的打印机')
      }
      // lodop.PRINT()
    }
	}
}
</script>

<style lang="scss">
.flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}
.sp-print__project-auth {
	white-space: nowrap;
}
.sp-print {
  position: relative;
  min-width: 1000px;
  max-width: 1240px;
  width: 100%;
  padding: 20px;
  border: 1px solid #ccc;
  margin: 0 auto;
	box-sizing: border-box;

  &__ {
    &header {
      display: flex;

      img {
        display: block;
      }

      &- {

        &qrcode {
          width: 150px;
          height: 100px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        &avatar {
          width: 150px;
          height: 200px;

          img {
            width: 100%;
            height: 170px;
          }

          span {
            display: block;
            height: 30px;
            line-height: 40px;
            font-size: 16px;
            text-align: center;
            font-weight: bold;
          }
        }

        &title {
          flex: 1;
          padding: 0 30px;
          line-height: 1;
          font-size: 24px;
          text-align: center;
          font-weight: bold;
          height: 100px;
          overflow: hidden;

          h2 {
            font-size: 24px;
          }
        }
      }
    }

    &person {
      position: absolute;
      top: 140px;
      left: 20px;
      right: 180px;
      height: 80px;
      padding-top: 20px;
      border-top: 1px solid #eee;
      box-sizing: border-box;
      // background: #f00;

      &- {

        &list {
          display: flex;
          align-items: center;
        }

        &item {
          flex: 1;
          height: 30px;
          line-height: 30px;
        }
      }
    }

    &title {
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      color: #333;
      text-align: center;
      background: #f7f7f7;
      margin: 10px auto 0;
    }

    &project {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #eee;
      padding: 10px 0;
      min-height: 80px;

      &- {

        &name,
        &auth {
          width: 150px;
        }

        &list {
          flex: 1;
          padding: 0 20px;
        }

        &tips {
          padding-bottom: 10px;
        }
      }
    }

    &tips {
      display: flex;
      align-items: center;
      padding: 10px 0;

      i {
        padding: 0 10px;
        // padding-right: 10px;
      }
    }

    &footer {
      padding-top: 10px;
      border-top: 1px solid #eee;
      text-align-last: right;
      font-size: 14px;
    }
  }
}
</style>
